<template>
  <view class="publish-page">
    <view class="header">
      <uni-icons type="arrowleft" size="24" @click="goBack"></uni-icons>
      <text class="title">发布内容</text>
      <text class="publish-btn" @click="handlePublish">发布</text>
    </view>
    
    <scroll-view scroll-y class="form-container">
		<view style="padding: 25rpx;">
			<!-- 分类选择 -->
			<view class="form-item">
			  <text class="label">选择分类</text>
			  <view class="category-list">
			    <view 
			      v-for="(item, index) in categories" 
			      :key="index"
			      :class="['category-option', form.category === item ? 'active' : '']"
			      @click="form.category = item"
			    >
			      {{item}}
			    </view>
			  </view>
			</view>
			
			<!-- 标签输入 -->
			<view class="form-item">
			  <text class="label">添加标签</text>
			  <view class="tag-input">
			    <input 
			      v-model="tagInput" 
			      placeholder="#输入标签" 
			      placeholder-class="placeholder"
			      @confirm="addTag"
			    />
			    <uni-icons type="plus" size="20" color="#74b9ff" @click="addTag"></uni-icons>
			  </view>
			  <view class="tag-list">
			    <view 
			      v-for="(tag, index) in form.tags" 
			      :key="index"
			      class="tag-item"
			      @click="removeTag(index)"
			    >
			      #{{tag}}
			      <uni-icons type="close" size="14" color="#999"></uni-icons>
			    </view>
			  </view>
			  <view class="hot-tags">
			    <text class="hot-title">热门标签:</text>
			    <text 
			      v-for="(tag, index) in hotTags" 
			      :key="index"
			      class="hot-tag"
			      @click="addHotTag(tag)"
			    >#{{tag}}</text>
			  </view>
			</view>
			
			<!-- 内容输入 -->
			<view class="form-item">
			  <text class="label">内容</text>
			  <textarea 
			    v-model="form.content" 
			    placeholder="写下你想说的话..." 
			    placeholder-class="placeholder"
			    class="content-input"
			    maxlength="500"
			  ></textarea>
			  <text class="word-count">{{form.content.length}}/500</text>
			</view>
			
			<!-- 图片上传 -->
			<view class="form-item">
			  <text class="label">添加图片</text>
			  <view class="uploader">
			    <view 
			      v-for="(img, index) in form.images" 
			      :key="index"
			      class="image-preview"
			    >
			      <image :src="img" mode="aspectFill"></image>
			      <uni-icons 
			        type="close" 
			        size="18" 
			        color="#fff" 
			        class="delete-btn"
			        @click="removeImage(index)"
			      ></uni-icons>
			    </view>
			    <view 
			      v-if="form.images.length < 9"
			      class="upload-btn"
			      @click="chooseImage"
			    >
			      <uni-icons type="plusempty" size="28" color="#999"></uni-icons>
			      <text class="upload-text">添加图片</text>
			    </view>
			  </view>
			</view>
			
			<!-- 视频上传 -->
			<view class="form-item">
			  <text class="label">添加视频</text>
			  <view 
			    class="video-uploader"
			    @click="chooseVideo"
			  >
			    <view v-if="form.video" class="video-preview">
			      <video :src="form.video" controls></video>
			      <uni-icons 
			        type="close" 
			        size="18" 
			        color="#fff" 
			        class="delete-btn"
			        @click="removeVideo"
			      ></uni-icons>
			    </view>
			    <view v-else class="upload-btn">
			      <uni-icons type="videocam" size="28" color="#999"></uni-icons>
			      <text class="upload-text">添加视频</text>
			    </view>
			  </view>
			</view>
			
			<!-- 匿名选项 -->
			<view class="form-item">
			  <view class="anonymous-option">
			    <checkbox-group @change="toggleAnonymous">
			      <label>
			        <checkbox :checked="form.anonymous" color="#74b9ff" />
			        <text>匿名发布</text>
			      </label>
			    </checkbox-group>
			  </view>
			</view>
		</view>
    
    </scroll-view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      categories: ['告白', '祝福', '寻人', '吐槽', '其他'],
      hotTags: ['毕业季', '暗恋', '感谢', '表白', '友谊', '考研', '找工作', '校友'],
      tagInput: '',
      form: {
        category: '告白',
        tags: [],
        content: '',
        images: [],
        video: '',
        anonymous: false
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    addTag() {
      if (!this.tagInput.trim()) return
      const tag = this.tagInput.replace(/^#/, '').trim()
      if (tag && !this.form.tags.includes(tag)) {
        this.form.tags.push(tag)
        this.tagInput = ''
      }
    },
    addHotTag(tag) {
      if (!this.form.tags.includes(tag)) {
        this.form.tags.push(tag)
      }
    },
    removeTag(index) {
      this.form.tags.splice(index, 1)
    },
    async chooseImage() {
      try {
        const res = await uni.chooseImage({
          count: 9 - this.form.images.length,
          sizeType: ['compressed'],
          sourceType: ['album', 'camera']
        })
        this.form.images = [...this.form.images, ...res.tempFilePaths]
      } catch (err) {
        console.log('选择图片失败', err)
      }
    },
    removeImage(index) {
      this.form.images.splice(index, 1)
    },
    async chooseVideo() {
      try {
        const res = await uni.chooseVideo({
          sourceType: ['album', 'camera'],
          compressed: true,
          maxDuration: 60
        })
        this.form.video = res.tempFilePath
      } catch (err) {
        console.log('选择视频失败', err)
      }
    },
    removeVideo() {
      this.form.video = ''
    },
    toggleAnonymous(e) {
      this.form.anonymous = !!e.detail.value.length
    },
    handlePublish() {
      if (!this.form.content.trim()) {
        uni.showToast({
          title: '请填写内容',
          icon: 'none'
        })
        return
      }
      
      // 模拟发布成功
      uni.showLoading({
        title: '发布中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '发布成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.publish-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, #74ebd5, #ACB6E5);
    color: #fff;
    
    .title {
      font-size: 18px;
      font-weight: bold;
    }
    
    .publish-btn {
      font-size: 16px;
      font-weight: bold;
    }
  }
  
  .form-container {
    flex: 1;
    
    .form-item {
      margin-bottom: 20px;
      background-color: #fff;
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
      .label {
        display: block;
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: bold;
        color: #333;
      }
      
      .placeholder {
        color: #ccc;
      }
    }
    
    .category-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      
      .category-option {
        padding: 6px 15px;
        border-radius: 15px;
        background-color: #f5f5f5;
        color: #666;
        font-size: 14px;
        
        &.active {
          background: linear-gradient(90deg, #a18cd1, #fbc2eb);
          color: #fff;
          font-weight: bold;
        }
      }
    }
    
    .tag-input {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      
      input {
        flex: 1;
        height: 36px;
        padding: 0 10px;
        background-color: #f5f5f5;
        border-radius: 18px;
        font-size: 14px;
        color: #333;
      }
    }
    
    .tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
      
      .tag-item {
        display: flex;
        align-items: center;
        padding: 4px 10px;
        background-color: #f0f7ff;
        color: #1890ff;
        font-size: 12px;
        border-radius: 12px;
      }
    }
    
    .hot-tags {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      
      .hot-title {
        font-size: 12px;
        color: #999;
      }
      
      .hot-tag {
        font-size: 12px;
        color: #74b9ff;
      }
    }
    
    .content-input {
      width: 100%;
      height: 120px;
      padding: 10px;
      background-color: #f5f5f5;
      border-radius: 8px;
      font-size: 14px;
      color: #333;
      margin-bottom: 5px;
    }
    
    .word-count {
      display: block;
      text-align: right;
      font-size: 12px;
      color: #999;
    }
    
    .uploader {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      
      .image-preview, .upload-btn {
        width: calc((100vw - 60px) / 3);
        height: calc((100vw - 60px) / 3);
        border-radius: 8px;
        position: relative;
      }
      
      .image-preview {
        overflow: hidden;
        
        image {
          width: 100%;
          height: 100%;
        }
        
        .delete-btn {
          position: absolute;
          top: 5px;
          right: 5px;
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 50%;
          padding: 2px;
        }
      }
      
      .upload-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #f5f5f5;
        
        .upload-text {
          margin-top: 5px;
          font-size: 12px;
          color: #999;
        }
      }
    }
    
    .video-uploader {
      .video-preview {
        position: relative;
        
        video {
          width: 100%;
          height: 180px;
          border-radius: 8px;
        }
        
        .delete-btn {
          position: absolute;
          top: 10px;
          right: 10px;
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 50%;
          padding: 3px;
        }
      }
      
      .upload-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 180px;
        background-color: #f5f5f5;
        border-radius: 8px;
        
        .upload-text {
          margin-top: 10px;
          font-size: 14px;
          color: #999;
        }
      }
    }
    
    .anonymous-option {
      label {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #666;
        
        checkbox {
          margin-right: 8px;
        }
      }
    }
  }
}
</style>